<template>
  <div class="scroll-box card-box">
    <div class="pane-shell">
      <el-form :inline="true"
               @submit.native.prevent
               :model="dataForm"
               ref="dataForm"
               @keyup.enter.native="search">
        <el-form-item prop="treatmentState">
          <el-select v-model="dataForm.treatmentState"
                     placeholder="处理状态"
                     clearable>
            <el-option v-for="item in statusOptions"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop='userName'
                      :rules="stringRule(false, 1, 20)">
          <el-input v-model='dataForm.userName'
                    class='form-item'
                    clearable
                    placeholder='请输入姓名'></el-input>
        </el-form-item>
        <el-form-item>
          <el-date-picker v-model="date"
                          @change="changeDatePicker"
                          type="daterange"
                          range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"
                     @click="search">{{ $t('query') }}</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"
                     @click="Export">导出</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"
                     @click="batchHandleClick">批量处理</el-button>
        </el-form-item>
      </el-form>

      <el-table v-loading="dataListLoading"
                :data="dataList"
                border
                @selection-change="dataListSelectionChangeHandle"
                @sort-change="dataListSortChangeHandle"
                style="width: 100%;"
                :row-key="getRowKey">
        <el-table-column type="selection"
                         reserve-selection
                         align="center"
                         width="55"></el-table-column>
        <el-table-column type="index"
                         label="序号"
                         header-align="center"
                         align="center"
                         width="55">
        </el-table-column>
        <el-table-column prop="orderNumber"
                         label="商户订单号"
                         show-overflow-tooltip
                         header-align="center"
                         align="center">
        </el-table-column>
        <el-table-column prop="jobNumber"
                         label="工号"
                         show-overflow-tooltip
                         header-align="center"
                         align="center">
        </el-table-column>
        <el-table-column prop="userName"
                         label="姓名"
                         show-overflow-tooltip
                         header-align="center"
                         align="center">
        </el-table-column>
        <el-table-column prop="moneySum"
                         label="提现金额/元"
                         show-overflow-tooltip
                         header-align="center"
                         align="center">
        </el-table-column>
        <el-table-column prop="businessType"
                         label="方式"
                         show-overflow-tooltip
                         header-align="center"
                         align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.businessType === 1 ? '支付宝' : '银行卡' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="bankName"
                         label="银行名称"
                         show-overflow-tooltip
                         header-align="center"
                         align="center">
        </el-table-column>
        <el-table-column prop="cashAccount"
                         label="提现账号"
                         show-overflow-tooltip
                         header-align="center"
                         align="center">
        </el-table-column>
        <el-table-column prop="transactionNumber"
                         label="第三方交易单号"
                         show-overflow-tooltip
                         header-align="center"
                         align="center">
        </el-table-column>
        <el-table-column prop="treatmentState"
                         label="处理状态"
                         show-overflow-tooltip
                         header-align="center"
                         align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.treatmentState === 0">待处理</span>
            <span v-if="scope.row.treatmentState === 1">已处理</span>
            <span v-if="scope.row.treatmentState === 2">已拒绝</span>
          </template>
        </el-table-column>
        <el-table-column prop="reasonsRefusal"
                         label="拒绝理由"
                         show-overflow-tooltip
                         header-align="center"
                         align="center">
        </el-table-column>
        <el-table-column prop="createDate"
                         label="创建时间"
                         show-overflow-tooltip
                         header-align="center"
                         align="center">
        </el-table-column>
        <el-table-column prop="updateName"
                         label="更新人"
                         show-overflow-tooltip
                         header-align="center"
                         align="center">
        </el-table-column>
        <el-table-column prop="updateDate"
                         label="更新时间"
                         show-overflow-tooltip
                         header-align="center"
                         align="center">
        </el-table-column>
        <el-table-column :label="$t('handle')"
                         fixed="right"
                         header-align="center"
                         align="center"
                         width="180">
          <template slot-scope="scope">
            <el-button type="text"
                       size="small"
                       v-if="$hasPermission('tb:withdrawDeposit:updateStatus') && scope.row.treatmentState === 0"
                       @click="handleClick(scope.row)">处理</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination :current-page="page"
                     :page-sizes="[10, 20, 50, 100]"
                     :total="total"
                     layout="total, sizes, prev, pager, next"
                     @size-change="pageSizeChangeHandle"
                     @current-change="pageCurrentChangeHandle">
      </el-pagination>
    </div>
    <handling-status ref="handlingDialog"
                     @callBack="getDataList" />
  </div>
</template>
<script>
import mixinViewModule from '@/mixins/view-module'
import formValidate from '@/mixins/form-validate'
import tableTemplate from '@/components/table-template'
import HandlingStatus from './handling-status.vue'
export default {
  mixins: [mixinViewModule, formValidate],
  props: {
    isrefresh: Boolean
  },
  watch: {
    isrefresh (newVal) {
      if (newVal) {
        this.getDataList()
      }
    }
  },
  data () {
    return {
      mixinViewModuleOptions: {
        getDataListURL: '/tb/withdrawDeposit/queryPage',
        getDataListIsPage: true,
        exportURL: '/tb/withdrawDeposit/exportWithdrawDeposit' // 导出接口，API地址
      },
      dataList: [],
      ids: '',
      statusOptions: [
        {
          label: '待处理',
          value: 0
        },
        {
          label: '已处理',
          value: 1
        },
        {
          label: '已拒绝',
          value: 2
        }
      ],
      date: '',
      dataForm: {
        treatmentState: '',
        userName: '',
        startTime: '',
        endTime: ''
      }
    }
  },
  mounted () {
    this.getDataList()
  },
  components: {
    tableTemplate,
    HandlingStatus
  },
  computed: {
  },
  methods: {
    /**
     * 时间格式转换
     */
    timeFormate (timeStamp) {
      let year = new Date(timeStamp).getFullYear()
      let month = new Date(timeStamp).getMonth() + 1 < 10 ? '0' + (new Date(timeStamp).getMonth() + 1) : new Date(timeStamp).getMonth() + 1
      let date = new Date(timeStamp).getDate() < 10 ? '0' + new Date(timeStamp).getDate() : new Date(timeStamp).getDate()
      return year + '-' + month + '-' + date
    },
    changeDatePicker (val) {
      if (val) {
        this.dataForm.startTime = this.timeFormate(val[0])
        this.dataForm.endTime = this.timeFormate(val[1])
      } else {
        this.dataForm.startTime = ''
        this.dataForm.endTime = ''
      }
    },
    getRowKey (row) {
      return row.id
    },
    // 处理
    handleClick (data) {
      this.openDialog('handlingDialog', data)
    },
    // 批量处理
    batchHandleClick () {
      let id = []
      this.dataListSelections.map(item => {
        id.push(item.id)
      })
      this.ids = id.toString()
      console.log(this.ids)
      if (this.ids.length === 0) {
        return this.$message.warning('请选择处理项')
      }
      this.$http.put('/tb/withdrawDeposit/batchAmend', {
        ids: this.ids
      }).then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.$message.success('操作成功')
        this.getDataList()
      })
    },
    // 导出
    Export () {
      let id = []
      this.dataListSelections.map(item => {
        id.push(item.id)
      })
      this.ids = id.toString()
      if (this.ids.length === 0) {
        return this.$message.warning('请选择导出项')
      }
      this.$http({
        type: 'get',
        url: this.mixinViewModuleOptions.exportURL,
        params: { ids: this.ids },
        responseType: 'blob'
      }).then(res => {
        let objectUrl = URL.createObjectURL(res.data) // 生成一个url
        const a = document.createElement('a')
        a.style.display = 'none'
        a.href = objectUrl
        a.click()
      }).catch(() => {
      })
    },
    // 查询
    search () {
      this.$refs.dataForm.validate((valid) => {
        if (valid) {
          this.getPageInit()
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.user-dialog {
  background: rgba(0, 0, 0, 0.5);
}

.download {
  text-decoration: none;
  color: #fff;
}

.tree-input {
  width: 100%;
  position: relative;

  .close {
    position: absolute;
    right: 10px;
    top: 13px;
    font-size: 16px;
    color: #858585;
    cursor: pointer;
    background-color: white;
  }
}

.addBtn {
  ::v-deep .el-form-item__content {
    display: flex;

    .user-switch {
      display: flex;
      align-items: center;
      margin-right: 15px;

      .message-title {
        margin-right: 10px;
      }
    }
  }
}

.card-box {
  padding: 0 !important;
}

.el-pagination {
  text-align: right;
  margin-top: 15px;
}
</style>
